var Popup = require('arale-popup');

// 通用提示组件
// 兼容站内各类样式
module.exports = Popup.extend({

  attrs: {
    // 提示内容
    content: null,

    // 提示框在目标的位置方向 [up|down|left|right]
    direction: 'up',

    // 提示框离目标距离(px)
    distance: 8,

    // 箭头偏移位置(px)，负数表示箭头位置从最右边或最下边开始算
    arrowShift: 22,

    // 箭头指向 trigger 的水平或垂直的位置
    pointPos: '50%'
  },

  _setAlign: function () {
    var alignObject = {},
        arrowShift = this.get('arrowShift'),
        distance = this.get('distance'),
        pointPos = this.get('pointPos'),
        direction = this.get('direction');

    if (arrowShift < 0) {
      arrowShift = '100%' + arrowShift;
    }

    if (direction === 'up') {
      alignObject.baseXY = [pointPos, 0];
      alignObject.selfXY = [arrowShift, '100%+' + distance];
    }
    else if (direction === 'down') {
      alignObject.baseXY = [pointPos, '100%+' + distance];
      alignObject.selfXY = [arrowShift, 0];
    }
    else if (direction === 'left') {
      alignObject.baseXY = [0, pointPos];
      alignObject.selfXY = ['100%+' + distance, arrowShift];
    }
    else if (direction === 'right') {
      alignObject.baseXY = ['100%+' + distance, pointPos];
      alignObject.selfXY = [0, arrowShift];
    }

    alignObject.comeFromArrowPosition = true;
    this.set('align', alignObject);
  },

  // 用于 set 属性后的界面更新
  _onRenderContent: function (val) {
    var ctn = this.$('[data-role="content"]');
    if (typeof val !== 'string') {
      val = val.call(this);
    }
    ctn && ctn.html(val);
  }

});
